<script type="text/javascript" src="/application/js/jquery.itextclear.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('input[type=text], input[type=password], input[type=url], input[type=email], input[type=number], textarea', '.form').iTextClear();
});
</script>
<h1 class="page-title">Novo Alimento</h1>
<div class="container_12 clearfix leading">
	<div class="grid_12">
		<div id="message"></div>		
		<div id="new-food">
			<form class="form has-validation" method="POST"> 
				<input type="hidden" name="new_food"  value="1"/>
				<div class="clearfix">
					<label for="form-name_food" class="form-label">Alimento <em>*</em></label>
					<div class="form-input"><input type="text" id="form-name_food" name="name_food" required="required" placeholder="Nome do alimento" /></div>
				</div>
				<div class="clearfix">
					<label for="form-measure" class="form-label">Medida <em>*</em></label>
					<div class="form-input">
						<select id="form-measure" name="measure" required="required">
							<?php
								foreach($measures as $m){
									echo '<option value="'.$m['m_id'].'">'.$m['m_name'].'</option>';
								}
							?>
						</select>
					</div>
				</div>
				<div class="clearfix">
					<label for="form-gml" class="form-label">g/ml <em>*</em></label>
					<div class="form-input"><input type="text" id="form-gml" name="gml" required="required" pattern="[0-9]*" placeholder="em gramas (g) ou mililitro (ml)" /></div>
				</div>
				<div class="clearfix">
					<label for="form-kcal" class="form-label">kcal <em>*</em></label>
					<div class="form-input"><input type="text" id="form-kcal" name="kcal" required="required" pattern="[0-9]*" placeholder="calorias" /></div>
				</div>
				<div class="clearfix">
					<label for="form-carb" class="form-label">Carboidratos</label>
					<div class="form-input"><input type="text" id="form-carb" name="carb" pattern="[0-9]*" placeholder="gramas de carboidatro" /></div>
				</div>
				<div class="clearfix">
					<label for="form-protein" class="form-label">Proteínas</label>
					<div class="form-input"><input type="text" id="form-protein" name="protein" pattern="[0-9]*" placeholder="gramas de proteinas" /></div>
				</div>
				<div class="clearfix">
					<label for="form-fat_t" class="form-label">Gorduras Totais</label>
					<div class="form-input"><input type="text" id="form-fat_" name="fat_t" pattern="[0-9]*" placeholder="gramas de gorduras totais" /></div>
				</div>
				<div class="clearfix">
					<label for="form-fat_s" class="form-label">Gorduras Saturadas</label>
					<div class="form-input"><input type="text" id="form-fat_s" name="fat_s" pattern="[0-9]*" placeholder="gramas de gorduras saturadas" /></div>
				</div>
				<div class="clearfix">
					<label for="form-fat_tr" class="form-label">Gordura Trans</label>
					<div class="form-input"><input type="text" id="form-fat_tr" name="fat_tr" pattern="[0-9]*" placeholder="gramas de gordura trans" /></div>
				</div>
				<div class="clearfix">
					<label for="form-fiber" class="form-label">Fibra Alimentar</label>
					<div class="form-input"><input type="text" id="form-fiber" name="fiber" pattern="[0-9]*" placeholder="gramas de fibra" /></div>
				</div>
				<div class="clearfix">
					<label for="form-sodium" class="form-label">Sódio</label>
					<div class="form-input"><input type="text" id="form-sodium" name="sodium" pattern="[0-9]*" placeholder="miligramas de sódio" /></div>
				</div>
				<div class="form-action clearfix">
					<div class="button submit" >Salvar</div>
					<button class="button" type="reset">Limpar</button>
				</div>
			</form>
		</div>
	</div>
</div>
<script>
	$(document).ready(function(){
		$('.button.submit').click(function() {
			form = $('form');
			data = form.serializeArray();
			$.post('/ajax/new_food',data,function(r){
				$('#message').html('<div class="message success closeable">	<span class="message-close"></span><h3>Sucesso!</h3><p> O alimento foi registrado! (id:'+r+')</p></div>');
				form.reset();
			});
		});
	});
</script>